
<template>
	<!--    数据查询-->
	<div id="C1">
		<div id="searchbox">
			<el-form :inline="true" :model="searchKeyWords" class="demo-form-inline">
				<el-form-item label="菜品类别名称">
					<el-input v-model="searchKeyWords.name" placeholder="菜品类别名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="primary" @click="dialogFormVisible=true" >新增菜品分类</el-button>
				</el-form-item>
			</el-form>
			<el-dialog title="新增菜品信息" :visible.sync="dialogFormVisible" center width="400px">
				<el-form :inline="true" :model="insertKeyWords" class="demo-form-inline" :rules="rules" ref="insertKeyWords">
					<el-form-item label="菜品类别名称" prop="name">
						<el-input v-model="insertKeyWords.name" placeholder="菜品类别名称"></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="remark">
						<el-input
								type="textarea"
								placeholder="请输入描述内容"
								v-model="insertKeyWords.remark"
								maxlength="30"
								show-word-limit
								style="width: 350px;height: 50px"
						>
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="newCP">确 定</el-button>
				</div>
			</el-dialog>


		</div>
		<!--        表格渲染-->
		<template>
			<el-table
					:data="isGetData ? getCurrentData:searchCurrentData"
					style="width: 100%">
				<el-table-column
						label="分类名称"
						align="center"
						width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="描述"
						align="center"
						width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.remark }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="创建时间"
						align="center"
						width="120">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.create_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="创建人"
						align="center"
						width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.create_by }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="更新时间"
						align="center"
						width="120">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.update_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="更新人"
						align="center"
						width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.update_by }}</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="200" align="center">
					<template slot-scope="scope">
						<CpEdit2  :editData='scope.row' @queren="handleEdit(scope.$index, scope.row)"></CpEdit2>
						<CpDel2  :delId="scope.row.name"  @queren="handleDelete(scope.$index, scope.row)"></CpDel2>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!--        分页-->

		<div id="PageBox" class="block">
			<el-pagination
					background
					:current-page="isGetData? gcurrentPage:scurrentPage"
					@current-change="handleCurrentChange"
					layout="prev, pager, next"
					:page-size="5"
					:total="isGetData ? getTotalData:searchTotalData">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	import CpDel2 from '../../components/houtai/CpDel2'
	import CpEdit2 from '../../components/houtai/CpEdit2'


	export default {
		name: "cpsz",
		components:{
			CpDel2 ,
			CpEdit2
		} ,
		data(){
			return{
				dialogFormVisible: false,
				isGetData:true,    //如果是页面渲染数据，table渲染数据源就是Getdata,否则,就是数据查询数据渲染，数据源就是searchData
				gcurrentPage: 1,   //当前页
				scurrentPage: 1,   //当前页
				searchKeyWords: {     //查询关键字存储
					name: '',
					pageNum:this.scurrentPage
				},
				insertKeyWords: {     //查询关键字存储
					name: '',
					remark: '',
				} ,


				rules: {
					name: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' },
						{ min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
					],
					remark: [
						{ required: true, message: '请输入评价', trigger: 'blur' },
						{ min: 1, max:30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
					]
				}
			}
		},

		computed:{
			getCurrentData(){
				return this.$store.state.cpstore.getCurrentDataB
			},
			getTotalData(){
				// console.log(this.$store.state.cpstore.CountB)
				return this.$store.state.cpstore.CountB
			},
			searchCurrentData(){
				return this.$store.state.cpstore.searchCurrentDataB
			},
			searchTotalData(){
				return 1
			}
		},
		methods:{
			success() {
				this.$notify.success({
					title: '成功',
					message: '新增成功！',
					offset:50
				});
			},
			error() {
				this.$notify.error({
					title: '错误',
					message: '网络出故障了，添加失败，请稍后重试！'
				});
			},
			...mapActions(['getCurrentDataB','searchCurrentDataB','getClassifyCount']),
			newCP(){
				this.$refs.insertKeyWords.validate((valid) => {
					if (valid) {
						// this.$axios({
						// 	url: '/mgrsite/dishesClassifyController/insertDishesClassify',
						// 	method: 'post',
						// 	data: {
						// 		name: this.insertKeyWords.name,
						// 		remark: this.insertKeyWords.remark,
						// 	}
						// }).then(res => {
						// 	console.log(res.data.code)
						// 	if (res.data.code == 200) {
						// 		this.dialogFormVisible = false
						// 		this.success()
						// 		this.getCurrentDataB([0,5])
						// 	} else {
						// 		this.error()
						// 	}
						// })
					} else {
						this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
					}
				})
			}   ,
			onSubmit(){
				this.isGetData=false
				let searchData=this.searchKeyWords
				this.searchCurrentDataB(searchData)
			},
			handleEdit(index,item){
				// console.log(111)
				this.getCurrentDataB(this.gcurrentPage)
				// this.editItem=item
			},
			handleDelete(index,item) {
					if (this.isGetData) {
						if (res.code === 200) {
							this.getCurrentDataB(this.gcurrentPage)
						}
					}else {
							if (res.code === 200) {
								let searchData = this.searchKeyWords
								this.searchCurrentDataB(searchData)
							}
						}
					},
			handleSizeChange(){

			},
			handleCurrentChange(val){
				if(this.isGetData){
					this.gcurrentPage=val
					this.getCurrentDataB([(val-1)*5,5])
				}else{
					this.scurrentPage=val
				}

			}
		} ,
		created() {
			this.getClassifyCount()
			this.getCurrentDataB([0,5]).then(res=>{
				// console.log(res)
			})
		}


	}
</script>

<style lang="less" scoped>
	#PageBox{
		padding: 10px;
		text-align: left;
		position: absolute;
		bottom: 10px;
		left: 20px;
	}
	#xiaoshou{
		cursor: pointer;
	}
	#C1{
		/*margin: auto;*/
		margin-left: 50px;
		margin-top: 10px;
		width: 1100px;
		height: 560px;
		position: relative;
		#searchbox{
			width: 1000px;
			text-align: left;
		}
	}
</style>

